<template>
  <nav :class="['sidebar', { close: isClosed }]">
    <header>
      <div class="image-text">
        <span class="image">
          <img src="../assets/logo2.png" alt="Logo" />
        </span>
        <div class="text logo-text">
          <span class="name">无畏契约</span>
          <span class="profession">valrant</span>
        </div>
      </div>
      <i class="bx bx-chevron-right toggle" @click="toggleSidebar"></i>
    </header>
    <div class="menu-bar">
      <div class="menu">
        <li class="search-box">
          <i class="bx bx-search icon"></i>
          <input type="text" placeholder="Search..." v-model="searchQuery" @keyup.enter="performSearch" />
        </li>
        <ul class="menu-links">
          <li class="nav-link">
            <router-link to="/">
              <i class="bx bx-home-alt icon"></i>
              <span class="text nav-text">主页</span>
            </router-link>
          </li>
          <li class="nav-link">
            <router-link to="/games">
              <i class="bx bx-bar-chart-alt-2 icon"></i>
              <span class="text nav-text">数据分析</span>
            </router-link>
          </li>
          <li class="nav-link">
            <router-link to="/contact">
              <i class="bx bx-bell icon"></i>
              <span class="text nav-text">消息</span>
            </router-link>
          </li>
          <li class="nav-link">
            <router-link :to="`/games/${gameId}`">
              <i class="bx bx-pie-chart-alt icon"></i>
              <span class="text nav-text">历史战绩</span>
            </router-link>
          </li>
          <li class="nav-link">
            <router-link to="/settings">
              <i class="bx bx-heart icon"></i>
              <span class="text nav-text">收藏</span>
            </router-link>
          </li>
          <li class="nav-link">
            <router-link to="/profile">
              <i class="bx bx-wallet icon"></i>
              <span class="text nav-text">个人信息</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="bottom-content">
        <li>
          <router-link to="/Login">
            <i class="bx bx-log-out icon"></i>
            <span class="text nav-text">登出</span>
          </router-link>
        </li>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isClosed: false,
      searchQuery: '',
      gameId: 123, // 示例游戏ID
      // 本地可搜索文本内容
      localData: [
        { title: "游戏介绍", link: "/games", content: "这是一款无畏契约游戏。" },
        { title: "数据分析", link: "/games", content: "包含各种数据分析。" },
        { title: "个人信息", link: "/profile", content: "查看和编辑您的个人信息。" },
        { title: "主页", link: "/", content: "查看和编辑您的个人信息。" },
        { title: "消息", link: "/contact", content: "查看和编辑您的个人信息。" },
        { title: "收藏", link: "/settings", content: "查看和编辑您的个人信息。" },
      ],
    };
  },
  methods: {
    toggleSidebar() {
      this.isClosed = !this.isClosed;
    },
    performSearch() {
      // 防止空查询
      if (this.searchQuery.trim() === '') {
        return;
      }

      // 在本地数据中搜索匹配项
      const result = this.localData.find(item => 
        item.title.includes(this.searchQuery) || item.content.includes(this.searchQuery)
      );

      // 如果找到匹配项，则跳转到对应链接
      if (result) {
        this.$router.push(result.link);
      } else {
        alert('没有找到匹配的内容'); // 可选：提示用户没有找到结果
      }
    },
  },
};
</script>

<style>
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

</style>